/**
 * 获取元素下特定层级的子元素
 * @param {HTMLElement} parent - 父元素
 * @param {number} targetLevel - 目标层级（1表示直接子元素，2表示孙子元素，以此类推）
 * @returns {HTMLElement[]} 目标层级的子元素数组
 */
function getChildrenByLevel(parent, targetLevel) {
    const result = [];

    // 递归遍历子元素，记录当前层级
    function traverse(node, currentLevel) {
        // 如果当前层级等于目标层级，添加到结果
        if (currentLevel === targetLevel) {
            result.push(node);
            return; // 无需继续向下遍历
        }

        // 如果还没到目标层级，继续遍历子元素（仅元素节点）
        if (currentLevel < targetLevel) {
            for (const child of node.children) {
                traverse(child, currentLevel + 1); // 层级+1
            }
        }
    }

    // 从父元素的直接子元素开始遍历（层级为1）
    for (const child of parent.children) {
        traverse(child, 1);
    }

    return result;
}

/**
 * 获取指定层级的父元素
 * @param {HTMLElement} element - 目标元素
 * @param {number} level - 要获取的父元素层级（1表示直接父元素）
 * @returns {HTMLElement|null} - 找到的父元素或null
 */
function getParentByLevel(element, level) {
    // 验证输入
    if (!(element instanceof HTMLElement) || typeof level !== 'number' || level < 1) {
        return null;
    }

    let currentElement = element;
    let currentLevel = 0;

    // 向上遍历指定层级
    while (currentElement && currentLevel < level) {
        currentElement = currentElement.parentElement;
        currentLevel++;
    }

    return currentElement;
}

// 获取指定元素的所有同级元素中的目标元素
function getSiblingByCondition(currentEl, condition) {
    // 获取父元素
    const parent = currentEl.parentElement;
    if (!parent) return null;

    // 遍历父元素的所有子元素（即所有同级元素，包括当前元素）
    for (const child of parent.children) {
        // 排除当前元素，只检查其他同级元素
        if (child !== currentEl && condition(child)) {
            return child; // 返回第一个符合条件的同级元素
        }
    }
    return null; // 未找到
}


// 使用示例
const current = document.querySelector('.active');
if (current) {
    // 示例1：获取同级中类名为 "target" 的元素
    const targetSibling = getSiblingByCondition(current, (el) => {
        return el.classList.contains('target');
    });

    // 示例2：获取同级中的第一个 div 元素
    const divSibling = getSiblingByCondition(current, (el) => {
        return el.tagName.toLowerCase() === 'div';
    });

    // 操作找到的同级元素
    if (targetSibling) {
        targetSibling.style.border = '2px solid blue';
    }
}


// 递归遍历元素及其所有子元素
function traverseElements(element, level = 0) {
    // 打印当前元素信息（标签名 + 层级缩进）
    const indent = '  '.repeat(level); // 用空格表示层级
    console.log(`${indent}元素: <${element.tagName.toLowerCase()}>`);

    // 遍历子元素（childNodes 包含所有类型节点：元素、文本、注释等）
    for (const child of element.childNodes) {
        // 只处理元素节点（跳过文本、注释等节点）
        if (child.nodeType === Node.ELEMENT_NODE) {
            traverseElements(child, level + 1); // 递归遍历子元素，层级+1
        }
    }
}

// 遍历文档中所有 input 元素及其子元素（如果有的话）
function findAllInputs(element) {
    // 检查当前元素是否是 input
    if (element.tagName.toLowerCase() === 'input') {
        console.log('找到 input 元素:', element);
    }

    // 递归遍历子元素
    for (const child of element.children) {
        findAllInputs(child);
    }
}

function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        // 生成一个从 0 到 i 的随机索引
        const j = Math.floor(Math.random() * (i + 1));
        // 交换元素 array[i] 和 array[j]
        [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
}